<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">


    <title>武侯祠管理系统</title>
    
   
    <!-- <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

    <style type="text/css">
        .contain{
            width: 80%;
            margin-right: 9%;
            margin-left: 9%;

        }
        .myNav{
            margin-bottom: 20px;
        }
        .aColor{
            color: black;
        }
        .myModal{
            width: 90%;
            margin-left: 20px;
            margin-right: 20px;
        }
        #modal1{
            min-height: 520px;
        }
        #myTable{
            padding:20px;
        }
        #tcontent{
            width: 86%;
            margin-right: 7%;
            margin-left: 7%;           
        }
    </style>


   
</head>

<body class = " light-green lighten-4">
   

   

    <nav class="myNav">
      <div class="nav-wrapper light-green darken-4">
        <a href="" class="brand-logo">&nbsp武侯祠管理系统</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="./main2.html">主页</a></li>
          <li><a href="./spot.html">景点</a></li>
          <li><a href="./food.html">美食</a></li>
          <li><a href="./toilet.html">厕所</a></li>
          <li><a href="./news.html">新闻</a></li>
          <li><a href="./broadcast.html">广播</a></li>
          <li><a href="./feedback.html">反馈</a></li>
          <li><a href="./password.html">设置</a></li>
        </ul>
      </div>
    </nav>

    <div class="contain  " >
        <div class="card  light-green lighten-5" id="myTable">
        <div class="row">
            <h3 class="col s12  center-align">反馈信息</h3>
        </div>
        <table class="highlight responsive-table center-align" id="tcontent">
            <thead>
                <tr>                 
                    <th data-field="date" >日期</th>
                    <th data-field="phone" >电话</th>
                    <th data-field="mail">邮件</th>
                    <th data-field="message">信息</th>
                </tr>
            </thead>
            <tbody id="tableBody">                               
            </tbody>
        </table>
        <div class="center-align">
        <ul class="pagination">
            <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
            <li class="active"><a href="#!">1</a></li>
            <li class="waves-effect"><a href="#!">2</a></li>
            <li class="waves-effect"><a href="#!">3</a></li>
            <li class="waves-effect"><a href="#!">4</a></li>
            <li class="waves-effect"><a href="#!">5</a></li>
            <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
        </ul>
        </div>
        </div>

    </div>



<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/main.js"></script>
<script>
    var lut = []; for (var i=0; i<256; i++) { lut[i] = (i<16?'0':'')+(i).toString(16); }
    var numT =2000;

    $(document).ready(function(){
        
        generateUUID();
        var deviceID = getUUID();
        var timestamp = (new Date()).valueOf();
        timestamp /= 1000;
        
        var settings = {
            type: "POST",
            url: "http://192.168.21.14:8000/feedback/get_complaints",
            dataType: "json",
            data:{
                timestamp:timestamp,
            },
            success: function(data,textStatus) {
                alert("success");
                console.log(JSON.stringify(data));
                for(var i =0; i<data.length; i++){
                    timestamp = data[i].date;
                    var newDate = new Date();
                    newDate.setTime(timestamp * 1000);
                    var date =  newDate.toLocaleDateString();

                    var phone = data[i].phone;
                    var mail = data[i].mail;               
                    // var num = data[i].id;
                    var message = data[i].message;

                    addNewRow(i,date,phone,mail,message);
                }
            },
            error: function(XHR, textStatus, errorThrown) {
                alert("网络错误" + XHR);
            },
        };
        $.ajax(settings);
    });
        

    function getDetail(num){     
        $('#mCon'+num).addClass( "active" );     
    }

   


    function addNewRow(num,date,phone,mail,message){
        $('#tcontent').append("<tr id=row"+num+"><td>"+
            "<a class='modal-trigger aColor' href='#modal"+num+"'>"+date+"</a></td>"+
            "<td>"+phone+"</td>"+
            "<td>"+mail+"</td>"+
            "<td>"+message+"</td></tr>");        
    }

    function getUUID() {
    var uuid = getCookie("device_id");
    if (!uuid) {
        uuid = generateUUID();
        setCookie("device_id",uuid,1);
    }
    return uuid;
    }
    
    function generateUUID(){
        var d0 = Math.random()*0xffffffff|0;
        var d1 = Math.random()*0xffffffff|0;
        var d2 = Math.random()*0xffffffff|0;
        var d3 = Math.random()*0xffffffff|0;
        
        return lut[d0&0xff]+lut[d0>>8&0xff]+lut[d0>>16&0xff]+lut[d0>>24&0xff]+'-'+
        lut[d1&0xff]+lut[d1>>8&0xff]+'-'+lut[d1>>16&0x0f|0x40]+lut[d1>>24&0xff]+'-'+
        lut[d2&0x3f|0x80]+lut[d2>>8&0xff]+'-'+lut[d2>>16&0xff]+lut[d2>>24&0xff]+
        lut[d3&0xff]+lut[d3>>8&0xff]+lut[d3>>16&0xff]+lut[d3>>24&0xff];
    }

</script>

</body>
</html>